<template>
  <view class="shopPage">
    <view class="topBox con">
      <view class="navbarBox">
        <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
        <u-input placeholder="搜索内容" v-model="title" @change="$u.debounce(titChange, 500)" prefix-icon="search" prefix-icon-style="color:#8dd9d4;font-size:24px"> </u-input>
        <image @click="goPage('/pages/message/message')" src="../../static/home/msg.png" class="icon" mode="aspectFill" />
      </view>
      <u-swiper :list="list2" height="160"></u-swiper>
    </view>
    <view class="tabsCon">
      <view class="tabBox">
        <view v-for="(item, index) in coteList" :key="index" @click="tabClick(item.id)" :class="{ tabItem: true, active: tabActive == item.id }">{{ item.title }}</view>
      </view>
      <view class="tabsBox">
        <view class="itemBox" v-for="(item, index) in subList">
          <view @click="tabClick1(item.id)" :class="{ default: true, active: tabActive1 == item.id }">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- <view class="zstpBox" v-if="tabActive === '1'">
      <view class="zstpItem" v-for="(item, index) in 5" :key="index" @click="goPage('/pages/home/newsDetails')">
        <image src="" mode="aspectFill" />
        <view class="r">
          <view class="t">南京国家农创中心助推广袤田野孕育新希望</view>
          <view class="b">
            <view>浏览4325</view>
            <view>2023-09-21</view>
          </view>
        </view>
      </view>
    </view> -->
    <view class="main">
      <template v-if="list.length > 0">
        <NewsItem v-for="(item, index) in list" :key="index" :info="item" />
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import { onMounted, reactive, ref } from "vue";
import NewsItem from "./components/NewsItem.vue";
import { selectCote, selectInfoLst, selectSubCote } from "@/api/home";
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
const coteList = ref<any[]>([]);
const subList = ref<any[]>([]);
const tabActive = ref();
const tabActive1 = ref("");
const title = ref("");
const list = ref([]);
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const goodsStatus = ref("loadmore");
const goodsPage = ref(1);
onMounted(async () => {
  const res = await selectCote();
  coteList.value = res.data;
  tabActive.value = res.data[0].id;
  getSubList();
});
const tabClick = (id: string) => {
  tabActive.value = id;
  getSubList();
};
const tabClick1 = (id: string) => {
  tabActive1.value = id;
  rest();
};
const titChange = () => {
  console.log(title.value);
  rest();
};
const getSubList = async () => {
  const res = await selectSubCote(tabActive.value);
  subList.value = res.data;
  tabActive1.value = res.data[0]?.id;
  rest();
};

const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  const res = await selectInfoLst({ pageNo: goodsPage.value, cate: tabActive.value || null, subCate: tabActive1.value || null, title: title.value });
  list.value = list.value.concat(res.data.list);
  if (!res.data.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
const rest = () => {
  goodsPage.value = 1;
  goodsStatus.value = "loadmore";
  list.value = [];
  getList();
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
</script>
<style lang="less" scoped>
.shopPage {
  width: 100%;
  .topBox {
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
  }
}

.tabsCon {
  padding: 32rpx;
  background-color: #fff;
  margin-top: 24rpx;

  .tabBox {
    display: flex;
    margin-bottom: 20rpx;
    .tabItem {
      font-size: 32rpx;
      color: #333333;
      margin-right: 50rpx;
    }
    .active {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      position: relative;
      z-index: 2;
      &::before {
        content: "";
        position: absolute;
        left: 8px;
        bottom: 1rpx;
        width: 100rpx;
        height: 6rpx;
        background: #80d7cf;
        z-index: 1;
      }
    }
  }
}
.zstpBox {
  padding: 32rpx;
  background: #fff;
  margin-top: 20rpx;
  .zstpItem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
    image {
      width: 200rpx;
      height: 150rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      background: #75584d;
    }
    .r {
      width: calc(100% - 220rpx);
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .t {
        font-size: 26rpx;
        color: #333333;
      }
      .b {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #8a8a8d;
      }
    }
  }
}
</style>
